<template>
    <div class="container">
        <el-menu
            class="shadow"
            :default-active="this.$route.path"
            :router="true"
            background-color="#ffffff"
            text-color="#242424"
            active-text-color="#1998e4"
            mode="horizontal">
            <el-menu-item
                index="/user/details"
            >
                <em class="el-icon-user" />
                <span width="100%">个人信息</span>
            </el-menu-item>
            <el-menu-item
                index="/user/collections"
            >
                <em class="el-icon-folder" />
                <span>我的收藏</span>
            </el-menu-item>
            <el-menu-item
                index="/user/stars"
            >
                <em class="el-icon-star-off" />
                <span>我的关注</span>
            </el-menu-item>
            <el-menu-item
                index="/user/records"
            >
                <em class="el-icon-date" />
                <span>浏览记录</span>
            </el-menu-item>
            <el-menu-item
                index="/user/apply"
            >
                <em class="el-icon-document" />
                <span>申请记录</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from '@element-plus/icons'
export default {
    name: 'IndexSidebar',
    components: {
        Location,
        Document,
        IconMenu,
        Setting
    },
    data() {
        return {
            isCollapse: false,
        }
    }
}
</script>

<style scoped>
.container {
    width: 100%;
    height: 600px;
    overflow: hidden;
}
.shadow {
    border: 1px solid #e4e4e4;
}
</style>